<!--
* @FileDescription: 用户批量修改部门
* @Author: zhangjing
* @Date: 2021-9-28 3:27:32 ?F10: PM?
* @LastEditors: zhangjing
* @LastEditTime: 2021-9-28 3:27:32 ?F10: PM?
 -->
<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
	>
		<a-spin :spinning="confirmLoading" style="min-height: 450px;">
			<a-input-search placeholder="筛选部门" @change="searchDept" allow-clear />
			<a-tree
				class="mt10"
				:tree-data="treeData"
				:expanded-keys="expandedKeys"
				:auto-expand-parent="autoExpandParent"
				@expand="onExpand"
				:replaceFields="replaceFields"
				:selectedKeys.sync="treeKeys"
				@select="selectTree"
			>
				<template slot="title" slot-scope="{ deptName }">
					<span v-if="deptName.indexOf(searchValue) > -1">
						{{ deptName.substr(0, deptName.indexOf(searchValue)) }}
						<span style="color: #f50">{{ searchValue }}</span>
						{{ deptName.substr(deptName.indexOf(searchValue) + searchValue.length) }}
					</span>
					<span v-else>{{ deptName }}</span>
				</template>
			</a-tree>
		</a-spin>
	</a-modal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import { clearDeep } from '@/utils/base';
let dataList = [];
const getParentKey = (values, tree) => {
	let newtreee = [];
	for (let i = 0; i < tree.length; i++) {
		const node = tree[i];
		if (
			values.some(value => {
				return JSON.stringify(node).indexOf('"deptId":"' + value + '"') > -1;
			})
		) {
			let value = values.find(value => {
				return JSON.stringify(node).indexOf('"deptId":"' + value + '"') > -1;
			});
			if (node.deptId == value) {
				node.children = null;
			} else {
				node.children = getParentKey(values, node.children);
			}
			newtreee.push(node);
		}
	}
	return newtreee;
};
const generateList = data => {
	for (let i = 0; i < data.length; i++) {
		const node = data[i];
		const key = node.deptId;
		dataList.push({ key, title: node.deptName });
		if (node.children) {
			generateList(node.children);
		}
	}
};
export default {
	name: 'usersChangeDeptModal',
	data() {
		return {
			title: '切换部门',
			deptId: '',
			userIds: '',
			treeData: [],
			alltreeData: [],
			treeKeys: [],
			autoExpandParent: false,
			expandedKeys: [],
			searchValue: '',
			type: '',
			replaceFields: { children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }
		};
	},
	mixins: [ModalMixins],
	created() {},
	methods: {
		show(userIds, type) {
			this.userIds = [...userIds];
			(this.type = type), (this.visible = true);
			if (this.treeData.length == 0) {
				this.getDeptTree();
			}
		},
		handleOk() {
			this.confirmLoading = true;
			this.$postAction(
				this.type == 'stu' ? sysManageapi.stuChangeDept : sysManageapi.usersChangeDept,
				Object.assign(
					{},
					{
						deptId: this.deptId
					},
					this.type == 'stu'
						? {
								stuIds: this.userIds
						  }
						: { userIds: this.userIds }
				)
			)
				.then(res => {
					if (res && res.code == 200) {
						this.$message.success('保存成功');
						this.$emit('ok');
						this.handleCancel();
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		},
		handleCancel() {
			this.$emit('close');
			this.visible = false;
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		getDeptTree() {
			this.$postAction(sysManageapi.getDeptTree).then(res => {
				if (res && res.code == 200) {
					this.treeData = [...res.data];
					this.alltreeData = [...res.data];
					this.expandedKeys = [];
					this.treeData.forEach(item => {
						this.expandedKeys.push(item.deptId);
					});

					generateList([...res.data]);
				}
			});
		},
		searchDept(e) {
			const value = e.target.value;
			if (value) {
				const expandedKeys = dataList
					.map(item => {
						if (item.title.indexOf(value) > -1) {
							return item.key;
						}
						return null;
					})
					.filter((item, i, self) => item && self.indexOf(item) === i);
				let list = JSON.parse(JSON.stringify(this.alltreeData));
				let newtree = getParentKey(expandedKeys, list);
				this.treeData = [...newtree];
				Object.assign(this, {
					expandedKeys,
					searchValue: value,
					autoExpandParent: true
				});
			} else {
				this.treeData = [...this.alltreeData];
				let expandedKeys = [];
				this.treeData.forEach(item => {
					expandedKeys.push(item.deptId);
				});
				Object.assign(this, {
					expandedKeys,
					searchValue: value,
					autoExpandParent: false
				});
			}
		},
		selectTree(e) {
			this.deptId = e[0];
		}
	}
};
</script>

<style scoped></style>
